<template>
  <div id="plan_all">
    <div class="nav">
      <hy-search
        class="search_box"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :button="{btnShowBy3:true}"
        :buttonText="{btnNameBy3:'新增计划表'}"
        :col="6"
        @search="getlist(0)"
        @clickbybtn3="addorder()"
      ></hy-search>
    </div>
    <div class="order_table">
      <template>
        <el-table :data="tableData" style="width: 100%" height="631" stripe>
          <el-table-column prop="xuhao" label="序号" align="center"></el-table-column>
          <el-table-column prop="year" label="年份" align="center"></el-table-column>
          <el-table-column prop="month" label="月份" align="center"></el-table-column>
          <el-table-column prop="saleplan" label="销售计划" align="center"></el-table-column>
          <el-table-column prop="factnum" label="实际数量" align="center"></el-table-column>
          <el-table-column prop="createon" label="创建时间" align="center"></el-table-column>
          <el-table-column prop="preparename" label="制单人" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <el-row slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.state=='待下发'"
                @click="daixiafa(scope.row.planno)"
              >下发</el-button>
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.state=='待审核'"
                @click="xq(scope.row.planno,1)"
              >审核</el-button>
              <el-button size="mini" type="primary" @click="xq(scope.row.planno,0)">详情</el-button>
            </el-row>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog
        title="下发部门"
        :visible.sync="dialogVisible"
        width="30%"
        :modal-append-to-body="false"
      >
        <div class="color_box"></div>
        <div class="distribute">
          <ul>
            <li v-for="(item,index) in xaifaval " :key="index">
              <el-checkbox v-model="xfbmval[index]">{{item.value}}</el-checkbox>
            </li>
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="xiafa()">确定</el-button>
          <el-button type="info" size="medium" @click="dialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      total: 1,
      current: 1,
      pagesize: 11,
      formInline: {},
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入制单人",
          prop: "customProductName"
        },
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      dialogVisible: false,
      tableData: [],
      xaifaval: [],
      xfbmval: [],
      planno: ""
    };
  },
  created() {
    this.getlist(0);
    this.getbm();
  },
  methods: {
    //点击待下发
    daixiafa(e) {
      this.dialogVisible = true;
      this.planno = e;
    },
    //下发确定
    xiafa() {
      var sd = [];
      for (var i = 0; i < this.xfbmval.length; i++) {
        if (this.xfbmval[i] == true) {
          sd.push(this.xaifaval[i].value);
        }
      }
      let arr = { result: "分发", planno: this.planno, lstdepart: sd };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/OrderPlanlst?index=4&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = data1.string.__text;
        console.log(data3);
        if (data3 == "分发成功") {
          this.$message({
            message: "分发成功",
            type: "success"
          });
          this.dialogVisible = false;
          this.getlist(0)
        } else {
          this.$message.error("分发失败");
        }
      });
    },
    //获取部门
    getbm() {
      let arr = {};
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/PersonnelManagement.asmx/GetDeppos?index=1&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.xaifaval = data3;
      });
    },
    // 分页
    handleCurrentChange(e) {
      this.getlist(e - 1);
    },
    //列表数据
    getlist(page) {
      let arr = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : "",
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/OrderPlanlst?index=1&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.total = data3.total;
        var val = [];
        data3.lstall.forEach(item => {
          val.push(item);
        });
        this.tableData = val;
        for (var i = 0; i < this.tableData.length; i++) {
          var dd = new Date(parseInt(this.tableData[i].createon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.tableData[i].createon = y + "-" + m + "-" + d + " ";
          this.tableData[i].xuhao = 1 + i + 11 * page;
        }
      });
    },
    //订单计划详情
    xq(planno, e) {
      this.$router.push({
        path: "/SalesPlanXq",
        query: { planno: planno, e: e }
      });
    },
    //新增订单计划
    addorder() {
      this.$router.push("/SalesPlanAdd");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  background: $white;
  height: 50px;
  margin-top: 10px;
  width: 98%;
  padding: 0 1%;
  .search_box {
    width: 98%;
    padding-top: 5px;
  }
}
.order_table {
  margin-top: 10px;
}
.distribute {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 32%;
      height: 50px;
      line-height: 50px;
      text-align: left;
    }
  }
}
.block {
  text-align: center;
  padding-top: 10px;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
</style>
<style>
.el-dialog__footer {
  text-align: center;
}
#plan_all .el-dialog__body {
  padding-top: 0;
}
</style>